<template>
  <div class="map-component">
    <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
const emits = defineEmits(['loadViewer']);
// Cesium 初始化一定要在 onMounted 里面，不然加载有可能会出错
onMounted(() => {
  // 需要在src/global.d.ts中声明Cesium，不然会报错
  // 下面的token需要在Cesium官网注册获取 https://ion.cesium.com/tokens?page=1
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYWVkYWVkYi1iMDc2LTQxNDktOWQ2NC04OWM0MjYxMmRkZjEiLCJpZCI6MTg0Mzk0LCJpYXQiOjE3MDI1MzQwNDl9.Hxj6dTfaXCOi_Ahw2q8hAcAJwuEj8tOIxuF8VgQ5qME';
  // 创建地图
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 信息弹窗，开启这个会报错
    homeButton: false, // 点击初始的地理位置和相机视角的按钮
    geocoder: false, // 地理编码器输入框
    baseLayerPicker: false, // 图层选择
    navigationHelpButton: false, // 帮助按钮
    fullscreenButton: false, // 全屏按钮
    timeline: false, // 时间轴
    vrButton: false, // VR按钮
    animation: false, // 动画控制器
    sceneMode: Cesium.SceneMode.SCENE3D, // 默认3D
    sceneModePicker: false, // 切换3D和2D
  });

  //去掉左下角版权图标的图标
  viewer._cesiumWidget._creditContainer.style.display = "none";

  // 矢量图层 
  // Cesium Viewer中添加并配置一个WMTS地图图层 
  // 创建一个新的Cesium.WebMapTileServiceImageryProvider实例，该实例用于从WMTS服务获取地图瓦片
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // 天地图地图瓦片链接 可以参考 https://blog.csdn.net/Enbir/article/details/122586905  
    url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8fd88b73572a3965bd3d288209a68c62",
    // 图层的名称
    layer: "tdtBasicLayer",
    // 图层样式
    style: "default",
    // 瓦片的格式
    format: "image/jpeg",
    // 定义了与哪个瓦片矩阵集兼容。这里设置为“GoogleMapsCompatible”，意味着它应该与Google Maps的瓦片矩阵集兼容。
    tileMatrixSetID: "GoogleMapsCompatible",
    // 是否显示
    show: false
  }));
  // 矢量注记图层 
  // Cesium Viewer中添加并配置一个WMTS地图图层 
  // 创建一个新的Cesium.WebMapTileServiceImageryProvider实例，该实例用于从WMTS服务获取地图瓦片
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // 天地图地图瓦片链接
    url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=8fd88b73572a3965bd3d288209a68c62",
    // 图层的名称
    layer: "tdtAnnoLayer",
    // 图层样式
    style: "default",
    // 瓦片的格式
    format: "image/jpeg",
    // 定义了与哪个瓦片矩阵集兼容
    tileMatrixSetID: "GoogleMapsCompatible"
  }));

  // 将viewer传递给父组件
  emits('loadViewer', viewer)
});
</script>

<style lang="less" scoped>
.map-component {
  width: 100%;
  height: 100%;
}
</style>
